<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心灵邀请函</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f9f6f2;
            color: #333;
            line-height: 1.8;
        }

        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        header {
            text-align: center;
            padding-bottom: 30px;
            border-bottom: 1px solid #eee;
        }

        h1 {
            font-size: 28px;
            color: #6a5acd;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .subtitle {
            margin-top: 10px;
            color: #999;
            font-size: 14px;
        }

        .section {
            margin-top: 30px;
        }

        .section-title {
            font-size: 20px;
            color: #6a5acd;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .game-list, .teacher-list {
            list-style-type: none;
        }

        .game-item, .teacher-item {
            background-color: #f8f6ff;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            border-left: 4px solid #6a5acd;
            position: relative;
        }

        .game-name, .teacher-name {
            font-weight: bold;
            color: #6a5acd;
            margin-bottom: 5px;
        }

       .conclusion-box {
    background-color: #f8f6ff; /* 改为和列表项一致的柔和紫色背景，提高可读性 */
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    font-size: 15px;
    color: #333; /* 改为深色，提高对比度 */
    border-left: 4px solid #6a5acd; /* 改为和标题一致的紫色边，增强视觉统一 */
    line-height: 1.7;
    white-space: pre-wrap;       /* 保留原始换行和空格 */
    word-wrap: break-word;       /* 长单词自动换行 */
    word-break: break-word;      /* 中文和英文都可断行 */
    overflow-wrap: break-word;   /* 兼容性更好的换行 */
    min-height: 60px;            /* 避免内容过少时盒子太小 */
}

        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: #999;
            font-size: 12px;
        }

        .input-area {
            margin-bottom: 30px;
        }

        textarea {
            width: 100%;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #ddd;
            font-size: 16px;
            resize: vertical;
            min-height: 120px;
        }

        button {
            display: block;
            margin: 15px auto 0;
            background-color: #6a5acd;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 15px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #5549c4;
        }
button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
        .loading {
            text-align: center;
            color: #6a5acd;
            margin: 20px 0;
            font-style: italic;
        }

        .error {
            color: #e74c3c;
            text-align: center;
            margin: 20px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>心灵邀请函</h1>
            <p class="subtitle">为你量身定制的疗愈方案</p>
        </header>

        <div class="input-area">
            <textarea id="userInput" placeholder="请输入你的烦恼或困惑..."></textarea>
            <button onclick="generateInvitation()">生成邀请函</button>
        </div>

        <div id="loading" class="loading" style="display: none;">正在为你生成心灵邀请函，请稍候...</div>
        <div id="error" class="error" style="display: none;"></div>

        <div id="result" style="display: none;">
            <!-- 游戏推荐 -->
            <section class="section">
                <h2 class="section-title">🎮 为你推荐的游戏解法</h2>
                <ul class="game-list" id="gameList"></ul>
                <div class="conclusion-box" id="gameConclusionBox"></div>
            </section>

            <!-- 导师推荐 -->
            <section class="section">
                <h2 class="section-title">👩‍🏫 为你匹配的导师方案</h2>
                <ul class="teacher-list" id="teacherList"></ul>
                <div class="conclusion-box" id="teacherConclusionBox"></div>
            </section>
        </div>

        <footer class="footer">
            <p>愿这份邀请函，为你带来一丝温暖与力量</p>
        </footer>
    </div>

    <script>
        async function generateInvitation() {
            const userInput = document.getElementById('userInput').value;
            if (!userInput.trim()) {
                alert('请输入你的烦恼或困惑');
                return;
            }
 const button = document.querySelector('button');
 button.disabled = true;
            // 显示加载状态
            document.getElementById('loading').style.display = 'block';
            document.getElementById('error').style.display = 'none';
            document.getElementById('result').style.display = 'none';

            try {
                const response = await fetch('http://112.124.28.46:8080/invitation/generate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ user_input: userInput }), // 👈 注意：字段名是 user_input
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${await response.text()}`);
                }

                const data = await response.json();
                console.log(data)
                if (!data.ok) {
                    throw new Error('服务器返回错误');
                }

                const gameConclusionBox = document.getElementById('gameConclusionBox');
if (data.game_conclusion) {
    gameConclusionBox.textContent = data.game_conclusion; // 👈 改用 textContent
} else {
    gameConclusionBox.textContent = '暂无游戏解法建议';
}

// 渲染导师总结
const teacherConclusionBox = document.getElementById('teacherConclusionBox');
if (data.teacher_conclusion) {
    teacherConclusionBox.textContent = data.teacher_conclusion; // 👈 改用 textContent
} else {
    teacherConclusionBox.textContent = '暂无导师陪伴建议';
}
                // 显示结果区域
                document.getElementById('result').style.display = 'block';

            } catch (error) {
                console.error('生成邀请函失败:', error);
                const errorMsg = document.getElementById('error');
                errorMsg.textContent = `生成失败：${error.message}`;
                errorMsg.style.display = 'block';
            } finally {
                 document.getElementById('loading').style.display = 'none';
                 button.disabled = false;
            
            }
        }
    </script>
</body>
</html>